import {connect} from "react-redux";
import {createIncrementAction, createDecrementAction, createIncrementAsyncAction} from "../../redux/count_action";
import React, {Component} from 'react';

class Index extends Component {

    increment = () => {
        const {value} = this.selectNum
        this.props.jia(Number(value))
    }
    decrement = () => {
        const {value} = this.selectNum
        this.props.jian(Number(value))
    }
    incrementIfOdd = () => {
        const {value} = this.selectNum
        if (this.props.count % 2 !== 0) {
            this.props.jia(Number(value))
        }
    }
    incrementAsnc = () => {
        const {value} = this.selectNum
        this.props.jiaAsync(Number(value), 500)
    }

    render() {
        return (
            <div>
                <h1>当前求和为：{this.props.count}</h1>
                <select ref={c => {
                    this.selectNum = c
                }}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                <button onClick={this.increment}>+</button>
                <button onClick={this.decrement}>-</button>
                <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>
                <button onClick={this.incrementAsnc}>异步加</button>
            </div>
        );
    }
}


export default connect(
    state => ({count: state}),
    //简写
    {
        jia: createIncrementAction,
        jian: createDecrementAction,
        jiaAsync: createIncrementAsyncAction,
    }
    // 一般写法
    //dispatch => ({
    //       jia: data => dispatch(createIncrementAction(data)),
    //     jian: data => dispatch(createDecrementAction(data)),
    //   jiaAsync: (data, time) => dispatch(createIncrementAsyncAction(data, time))
    //})
)(Index)
